<template>
  <el-skeleton :loading="loading" animated>
    <template #template>
      <div v-for="i in 3">
        <el-row>
          <el-col :span="3">
            <el-skeleton-item variant="circle" style="width: 70px; height: 70px"/>
          </el-col>
          <el-col :span="20">
            <el-skeleton-item variant="text" style="padding: 15px;margin-top: 10px"/>
            <el-skeleton-item variant="text" style="width: 30%"/>
          </el-col>
        </el-row>
        <hr>
      </div>
    </template>
    <template #default>
      <div>
        <el-row>
          <el-col :span="2">
            <el-text size="small"> 好评:{{ appraiseVO.goodCount }}</el-text>
          </el-col>
          <el-col :span="2">
            <el-text size="small"> 中评:{{ appraiseVO.ordinaryCount }}</el-text>
          </el-col>
          <el-col span="2">
            <el-text size="small"> 差评:{{ appraiseVO.badCount }}</el-text>
          </el-col>
        </el-row>
      </div>
      <div v-if="appraiseVO.appraiseList.length>0">
        <div v-for="item in appraiseVO.appraiseList">
          <el-row>
            <el-col :span="3">
              <el-avatar :size="50" :src="$img+item.userAvatar"/>
              <div>
                <el-text size="small">
                  {{ item.userName }}
                </el-text>
              </div>
            </el-col>
            <el-col :span="20" style="background-color: rgba(170,166,166,0.16);padding: 5px">
              <!--评分-->
              <div>
                <el-rate disabled v-model="item.rating"/>
                <span v-if="item.rating===5" style="color: red;font-size: small;">五星好评</span>
              </div>
              <!--              评论内容-->
              <div>
                <span>{{ item.comment }}</span>
              </div>
              <!--              评论文件-->
              <div v-if="item.appraiseFiles">
                <!--                图片-->
                <el-image style="height: 50px;width: 50px" :src="$img+i"
                          v-for="i in item.appraiseFiles" v-if="/^image\//.test(i.fileType)"></el-image>
                <!--                视频-->
                <video width="320" height="240" controls v-for="i in item.appraiseFiles" autoplay
                       v-if="/^video\//.test(i.fileType)">
                  <source :src="$img+i" type="video/mp4">
                  <source :src="$img+i" type="video/ogg">
                  <source :src="$img+i" type="video/webm">
                  您的浏览器不支持 video 属性。
                </video>
              </div>
              <!--              购买规格-->
              <div>
                <el-text size="small">{{ item.skuSpecs }}</el-text>
              </div>
              <!--              回复，点赞-->
              <div style="display: flex;justify-content: end">
                <el-space wrap>
                  <el-icon>
                    <el-image :src="require('@/assets/icon/thumbs_up.svg')"></el-image>
                  </el-icon>
                  <el-icon @click="showReplyInputFun(item.id)">
                    <ChatDotRound/>
                  </el-icon>
                </el-space>
              </div>
              <div class="item_center">
                <el-icon>
                  <ArrowUp/>
                </el-icon>
                <el-text size="small">展开查看回复</el-text>
              </div>
              <div v-show="showReplyInput && item.id===appriseReply.appraiseId">
                <el-input v-model="appriseReply.comment" placeholder="请输入你的回复">
                  <template #suffix>
                    <el-text @click="submitSaveReply">提交</el-text>
                  </template>
                </el-input>
              </div>
            </el-col>
          </el-row>

          <hr>
        </div>
      </div>
      <div v-else>
        <el-result title="空" sub-title="暂无评论数据">
          <template #icon>
            <el-image :src="require('@/assets/icon/nodata.png')"/>
          </template>
        </el-result>
      </div>
    </template>
  </el-skeleton>
</template>

<script setup>
import {ref, defineProps, watch, reactive, onMounted, computed} from 'vue'
import {getAppraiseBySkuId, addAppraiseReply} from '@/api/goods'

let loading = ref(true)
let appraiseSearchDTO = reactive({
  rating: -1,
  pageNum: 0,
  pageSize: 5,
  skuId: props.skuId,
  total: Number
})
let appraiseVO = reactive({
  appraiseList: [],
  goodCount: 0,
  badCount: 0,
  ordinaryCount: 0,
  skuId: props.skuId
})
let props = defineProps(['skuId'])
let appriseReply = reactive({
  appraiseId: '',
  parentId: '',
  comment: ''
})
let showReplyInput = ref(false)

function getAppraise() {
  appraiseSearchDTO.skuId = props.skuId
  getAppraiseBySkuId(appraiseSearchDTO).then(res => {
    appraiseVO.appraiseList = res.data.page.records
    appraiseVO.goodCount = res.data.goodCount
    appraiseVO.badCount = res.data.badCount
    appraiseVO.ordinaryCount = res.data.ordinaryCount
    setTimeout(() => {
      loading.value = false;
    }, 2000); // 这里的2000表示2000毫秒后，即2秒后执行
  }).catch(() => {
    loading.value = false
  })
}

function submitSaveReply() {
  addAppraiseReply(appriseReply)
}

function showReplyInputFun(appriseId) {
  //重置数据
  appriseReply.parentId = ''
  appriseReply.appraiseId = ''
  appriseReply.comment = ''
  //在哪条商品评价下回复
  appriseReply.appraiseId = appriseId
  showReplyInput.value = true
}

//监听父组件传递的skuid是否发生变化
watch(props.skuId, () => {
  getAppraise()
})

onMounted(() => {
  getAppraise()
})

</script>

<style scoped>

</style>
